<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>输入提示</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>

<div class="info" style='width:28rem;'>
    <label style='color:grey'>地理编码，根据地址获取经纬度坐标</label>
    <div class="input-item">
        <div class="input-item-prepend"><span class="input-item-text" >搜索</span></div>
        <input id='tipinput' type="text" value='' autocomplete="off">
    </div>
    <div class="input-item">
        <div class="input-item-prepend"><span class="input-item-text">经纬度</span></div>
        <input id='lnglat' disabled type="text">
    </div>
    <input id="geo" type="button" class="btn" value="确定" />
</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=33f1e2553097c44e2542ee6d54c16b00&plugin=AMap.AutoComplete"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript">
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    //输入提示
    var autoOptions = {
        input: "tipinput"
    };

    AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
        var auto = new AMap.AutoComplete(autoOptions);
        var placeSearch = new AMap.PlaceSearch({
            map: map
        });  //构造地点查询类
        auto.on("select", select);//注册监听，当选中某条记录时会触发
        function select(e) {
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name);  //关键字查询查询
        }
    });

    map.on('click',function (e){
        let lng = e.lnglat.getLng()
            ,lat = e.lnglat.getLat()
            ,elem = getParam('p');
        document.getElementById('lnglat').value = lng + ' , ' + lat;
        parent.layui.$('#'+elem+'-lng').val(lng);
        parent.layui.$('#'+elem+'-lat').val(lat);
    });

    document.getElementById('geo').onclick = function (){

        parent.layer.close(parent.layer.getFrameIndex(window.name));
    }

    function getParam(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }

</script>
</body>
</html>